<template>
  <div class="uploadDocuments">
    <div class="mineLi">
      <!--<div class="li" v-for="(item,index) in tabs" :key="index">-->
      <!--<div class="tip">{{item.tip}}</div>-->
      <!--<div class="details">-->
      <!--<div class="left">-->
      <!--<img src="@/assets/logo.png" alt="">-->
      <!--</div>-->
      <!--<div class="right">-->
      <!--<div class="div">{{item.title}}</div>-->
      <!--<div class="div">{{item.qqq}}</div>-->
      <!--<div class="img" >-->
      <!--<img src="@/assets/images/ic_stars.png" alt="" v-for="i in item.num">-->
      <!--<img src="@/assets/images/ic_stars2.png" alt="" v-for="i in (5-item.num)">-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="sp1"><span>兑换ID：201905051234556765</span></div>-->
      <!--<div class="sp2"><span>剩余时间：23天15小时30分钟30秒</span></div>-->
      <!--</div>-->
      <div class="li">
        <div class="tip" v-if="form.task_type === 1">{{form.user_fit_cash}}元</div>
        <div class="tip" v-if="form.task_type === 2">{{form.user_fit_score}}工分</div>
        <div class="tip3" v-if="form.task_type === 3" @click.stop="imagePreview(form.prizes_img_url)">
          <img :src="form.prizes_img_url" alt="">
        </div>
        <div class="details">
          <div class="left">
            <img :src="form.img_url" alt="">
          </div>
          <div class="right">
            <div class="div">{{form.title}}</div>
            <div class="div">{{form.short_intro}}</div>
            <div class="img">
              <img src="@/assets/images/ic_stars.png" alt="" v-for="i in (form.difficulty_star | number)">
              <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in ((5-form.difficulty_star)| number)">
            </div>
          </div>
        </div>
        <div class="sp1"><span>兑换ID：{{form.exchange_no}}</span></div>
        <div class="sp2" v-show="form.status === 1||(form.status === 4 &&form.allow_submit_again===1)"><span>剩余时间：{{form.last_time}}</span>
        </div>
        <div class="sp2" v-show="form.status === 2"><span>提交时间：{{form.audit_time}}</span></div>
        <div class="sp2" v-show="form.status === 3"><span>审核时间：{{form.pass_time}}</span></div>
        <div class="sp2" v-show="form.status === 4"><span>拒绝时间：{{form.fail_time}}</span></div>
        <div class="sp2" v-show="form.status === 4"><span>拒绝原因：{{form.fail_remark}}</span></div>
        <div class="sp2" v-show="form.status === 5"><span>作废时间：{{form.cancel_time}}</span></div>
        <div class="btn" v-if="form.status === 1">
          <input class="groupBtn" type="button" value="去完成" @click="goDetails(item.user_task_id)">
          <input class="groupBtn" type="button" value="上传凭证" @click="uploadDocuments(item)">
        </div>
        <!--<div class="statebtn">-->
          <!--<input class="statebtn1" type="button" value="待审核" v-show="form.status === 2">-->
          <!--<input class="statebtn2" type="button" value="已通过" v-show="form.status === 3">-->
          <!--<input class="statebtn3" type="button" value="未通过" v-show="form.status === 4">-->
          <!--<input class="statebtn4" type="button" value="已作废" v-show="form.status === 5">-->
        <!--</div>-->
      </div>
    </div>
    <div class="screenshotsProof">
      <div class="top">
        <div class="sign"><img src="@/assets/images/title.png" alt=""></div>
        <span>截图凭证</span>
      </div>
      <div class="main">
        <div class="img" v-for="(item,index) in certify_img" :key="index">
          <img class="del" src="@/assets/images/ic_del.png" alt="" @click='del(index)'>
          <img :src="item" alt="">
        </div>
        <van-uploader :after-read="onRead" multiple :max-count="9" v-if="certify_img.length<=9">
          <div class="img"><img src="@/assets/images/add.png" alt=""></div>
        </van-uploader>
      </div>
      <div class="note">
        <textarea name="" v-model="form.user_remark" id="" cols="30" rows="10" placeholder="选填，请输入需要填写的备注"></textarea>
        <div class="noteTip">{{remarkLength}}/250字</div>
      </div>
    </div>
    <div style="height: 1rem;width: 100%"></div>
    <div class="btn">
      <input type="button" value="提交审核" @click="submit">
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 11:07.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend';
  import {ImagePreview, Dialog} from 'vant';

  export default {
    mounted() {
      this.form = JSON.parse(this.$route.query.form);
      if (this.form.status === 4 && this.form.allow_submit_again === 1) {
        this.certify_img = JSON.parse(this.form.certify_img);
      }
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        form: {},
        certify_img: [],
        remarkLength: 0,
      }
    },
    computed: {},
    methods: {
      /*提交*/
      submit() {
        if (this.certify_img.length === 0) {
          this.$toast('请上传凭证');
          return false;
        }
        Dialog.confirm({
          message: '确认提交审核吗？',
          confirmButtonText: '提交',
          confirmButtonColor: '#FDCC4A'
        }).then(() => {
          let params = {
            user_task_id: this.form.user_task_id,
            certify_img: JSON.stringify(this.certify_img),
            user_remark: this.form.user_remark,
            open_id: utils.getCookie('open_id_' + this.wechatId)
          };
          Indicator.open('加载中...');
          this.$axios.sendAudit(params).then(res => {
            Indicator.close();
            if (res.errcode !== '000') {
              this.$toast(res.errmsg);
              return false;
            }
            this.$toast(res.errmsg);
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          })
        })

      },
      // 获取上传图片的配置
      systemConfig(file) {
        this.$axios.systemConfig().then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          let params = new FormData();
          params.append('image_account', res.data.account);
          params.append('image_password', this.$md5(res.data.account + res.data.hostname + '/' + res.data.password));
          params.append('file', file);
          Indicator.open('加载中...');
          // 上传图片
          this.$axios.uploaderImg(res.data.hostname, params).then(res => {
            Indicator.close();
            if (res.data.resultCode !== '1') {
              this.$toast(res.errmsg);
              return false;
            }
            this.certify_img.push(res.data.data[0].url)
          }).catch(error => {
            Indicator.close();
            this.$toast('服务器异常');
          })
        })
      },
      //上传图片
      onRead(file) {
        let fileMaxSize = 1024 * 1024;//1M
        if (file.file.size > fileMaxSize * 5) {
          this.$toast("图片大小不能大于5M！");
          return false;
        }
        this.systemConfig(file.file);
      },
      //删除图片
      del(index) {
        this.certify_img.splice(index, 1)
      },
      /*
      * 转成number
      * */
      number(val) {
        return parseInt(val)
      },
      /*
      * 查看图片
      * */
      imagePreview(imgUrl) {
        let imgArr = [];
        imgArr.push(imgUrl);
        ImagePreview(imgArr);
      },
    },
    watch: {
      user_remark: function (val) {
        if (val.length > 250) {
          this.user_remark = val.substring(0, 250)
        }
        this.remarkLength = val.length;
      }
    },
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .uploadDocuments {
    width: 100%;
    height: 100%;
    background: white;
  }

  .mineLi {
    padding: 0 0.33rem;
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .li {
      position: relative;
      width: 100%;
      /*height: 3.4rem;*/
      border-bottom: 1px solid rgba(239, 239, 239, 0.5);

      .tip {
        font-size: 0.3rem;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 1.42rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background: #FF695A;
        -webkit-border-radius: 0 0 0.1rem 0.1rem;
        -moz-border-radius: 0 0 0.1rem 0.1rem;
        border-radius: 0 0 0.1rem 0.1rem;
        color: #FFFFFF;
      }

      .tip3 {
        position: absolute;
        top: 0.8rem;
        right: 0px;

        img {
          width: 1rem;
          height: 1rem;
        }
      }

      .details {
        width: 100%;
        height: 2.1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 1.56rem;
          height: 1.56rem;
          margin-right: 0.2rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 5rem;
          height: 1.56rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.36rem;

          .div {
            width: 5rem;
            text-align: left;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
            color: #333333;
          }

          div:nth-child(2) {
            color: #D2D2D2;
            font-size: 0.26rem;
          }

          .img {
            display: flex;
            flex-direction: row;
            justify-content: left;

            img {
              width: 0.39rem;
              height: 0.38rem;
              margin-right: 0.16rem;
            }
          }
        }
      }

      .sp1, .sp2 {
        text-align: left;
        color: #D2D2D2;
        font-size: 0.26rem;
        line-height: 0.5rem;
      }
    }
  }

  .screenshotsProof {
    padding: 0 0.33rem;

    .top {
      width: 100%;
      height: 0.9rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #333333;
      font-weight: 700;
      font-size: 0.32rem;

      .sign {
        width: 0.08rem;
        height: 0.33rem;
        margin-right: 0.14rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .main {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 0.88rem;

      .img {
        width: 2.2rem;
        height: 2.2rem;
        position: relative;
        margin-right: 0.08rem;
        margin-bottom: 0.08rem;

        img {
          width: 100%;
          height: 100%;
        }

        .del {
          width: 0.3rem;
          height: 0.3rem;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }

    .note {
      width: 100%;
      position: relative;

      .noteTip {
        position: absolute;
        bottom: 0.2rem;
        right: 0.2rem;
        font-size: 0.26rem;
        color: #ACACAC;
      }

      textarea {
        width: 100%;
        height: 1.78rem;
        background: #F8F8F8;
        color: #ACACAC;
        font-size: 0.3rem;
        border: 0;
        line-height: 0.4rem;
        padding: 0.2rem;
        box-sizing: border-box;
      }

      textarea::-webkit-input-placeholder {
        color: #ACACAC;
      }

      textarea ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ACACAC;
      }

      textarea :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ACACAC;
      }

      textarea :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #ACACAC;
      }
    }
  }

  .btn {
    width: 100%;
    height: 1rem;
    color: white;
    position: fixed;
    bottom: 0rem;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -4px 12px 0px rgba(240, 240, 240, 0.7);

    input[type='button'] {
      border-radius: 0.4rem;
      height: 0.8rem;
      width: 6.96rem;
      background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      border: 0;
    }
  }
</style>
